<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!-- <link rel="stylesheet" href="css/xx.css"> -->
<script type="text/javascript" src='bundle.js'>
</script>
<!-- <script src="js/xx.js"> -->
<style>

*{ padding:0; margin:0; list-style:none;}
.tab{ width:300px; height:300px; border:1px solid red; margin:100px auto;}
.tab input{ width:100px; float:left; height:30px;}
.tab .active{ background:red; color:#FFF;}
.tab li{ width:300px; height:270px; background:blue; font-size:100px; text-align:center; line-height:270px; color:red; display:none;}
.tab .show{ display:block;}
.tab section{ overflow:hidden;}
</style>

</script>
<body>
	<div class="tab" id="tab">
    	<section class="btnBox">
        	<input class="active" type="button" value="按钮1" />
            <input type="button" value="按钮2" />
            <input type="button" value="按钮3" />
        </section>
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

    <div class="tab" id="tab2">
    	<section class="btnBox">
        	<input class="active" type="button" value="按钮1" />
            <input type="button" value="按钮2" />
            <input type="button" value="按钮3" />
        </section>
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
		<div class="tab" id="tab3">
			<section class="btnBox">
					<input class="active" type="button" value="按钮1" />
						<input type="button" value="按钮2" />
						<input type="button" value="按钮3" />
				</section>
				<ul>
					<li class="show">1</li>
						<li>2</li>
						<li>3</li>
				</ul>
				<button type="button" name="button" id="left1">left</button>
				<button type="button" name="button" id="right1">right</button>
		</div>
</body>
</html>
